<template>
        <div id="main"></div>
      </template>
      
      <script>
      import * as echarts from 'echarts';
      
      export default {
        mounted() {
          var chartDom = document.getElementById('main');
          var myChart = echarts.init(chartDom);
          var option = {
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                crossStyle: {
                  color: '#999'
                }
              }
            },
            toolbox: {
              feature: {
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
              }
            },
            legend: {
              data: ['井下压强', '产量']
            },
            xAxis: [
              {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                axisPointer: {
                  type: 'shadow'
                }
              }
            ],
            yAxis: [
              {
                type: 'value',
                name: '产量',
                min: 0,
                max: 25,
                interval: 5,
                axisLabel: {
                  formatter: '{value}m³'
                }
              },
              {
                type: 'value',
                name: '井下压强',
                min: 0,
                max: 1000,
                interval: 200,
                axisLabel: {
                  formatter: '{value}Kpa '
                }
              }
            ],
            series: [
              {
                name: '产量',
                type: 'bar',
                data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
              },
              {
                name: '井下压强',
                type: 'line',
                yAxisIndex: 1,
                data: [222.0, 142.2, 321.3, 144.5, 426.3, 110.2, 220.3, 123.4, 243.0, 516.5, 112.0, 126.2]
              }
            ]
          };
          myChart.setOption(option);
        }
      };
      </script>
      
      <style scoped>
      #main {
        width: 460px;
        height: 300px;
      }
      </style>